<template>
  <div class="photoinfo-container">
    <!-- 大标题 -->
    <h3 class="title">新闻资讯</h3>

    <!-- 子标题 -->
    <p class="subtitle">
      <span>发布时间:2020:12:12 12:12:12</span>
      <span>点击:0次</span>
    </p>
    <hr />

    <!-- 缩略图区域 -->
    <div class="thumbs">
      <img
        class="preview-img"
        v-for="(item, index) in list"
        :src="item.src"
        height="100"
        @click="$preview.open(index, list)"
        :key="item.src"
      />
    </div>

    <!-- 图片内容区域 -->
    <div class="content">
      实际情况大多是我们发布一个图文，
      很少有人看。我们发布的视频播放效果不好，
      从拍摄到裁剪出一个Vlog，我们花了很多功夫。
      结果公布后我们遭到网友的强烈吐槽，不仅引流和变现不成功，
      品牌也上不去。有时候错的不是我们选择的方..
    </div>

    <!-- 放置一个现成的 评论子组件 -->

    <cmt-box></cmt-box>

    <!-- <h3 class="title">{{photoinfo.title}}</h3>
    <p class="subtitle">
      <span>发布时间:{{photoinfo.add_time|dataFormat}}</span>
      <span>点击:{{photoinfo.click}}次</span>
    </p>
    <hr />
     <div class="thumbs">
      <img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)" :key="item.src">
    </div>
<div class="content" v-html="photoinfo.content"></div>
    <cmt-box :id="id"></cmt-box>-->
  </div>
</template>


<script>
import comment from "../subcomponents/comment.vue";
export default {
  data() {
    return {
      id: this.$route.params.id, // 从路由中获取到的 图片Id
      photoinfo: [], // 图片详情
      list: [], // 缩略图的数组
    };
  },
  created() {
    // this.getPhotoInfo()
    // this.getThumbs()
  },
  methods: {
    // getPhotoInfo(){
    //     this.$http.get('api/getimageInfo/'+this.id).then(result=>{
    //         if(result.body.status===0){
    //         this.photoinfo=result.body.message[0]
    //         }
    //     })
    // },
    // getThumbs(){
    //     this.$http.get('api/getthumimages/'+this.id).then(result=>{
    //         if(result.body.status===0){
    //             result.body.message.forEach(item => {
    //                 item.w=600;
    //                 item.h=400;
    //             });
    //             this.list=result.body.message
    //         }
    //     })
    // }
  },
  components: {
    "cmt-box": comment,
  },
};
</script>



<style lang="scss" scope>
.photoinfo-container {
  padding: 0 4px;
  .title {
    font-size: 18px;
    text-align: center;
    margin: 15px 0;
    color: red;
  }
  .subtitle {
    display: flex;
    justify-content: space-between;
    color: #226aff;
  }
  .thumbs {
    img {
      margin: 10px;
      box-shadow: 0 0 8px #999;
    }
  }
}
</style>
